<template>
    <Card :title="props.title" :desc="props.desc">
        <Echarts :option="option" />
    </Card>
</template>

<script setup>
import {ref, watchEffect} from 'vue';
import _ from 'lodash';
import Card from './Card.vue';
import Echarts from './Echarts.vue';
import {getTotal} from '../utils';

const props = defineProps({
    config: {
        type: Object,
        default: () => {},
        required: false,
    },
    // 是否是半圆
    semicircle: {
        type: Boolean,
        default: false,
        required: false,
    },
    //是否展示百分比
    percent: {
        type: Boolean,
        default: false,
        required: false,
    },
    title: {
        type: String,
        default: '',
        required: false,
    },
    desc: {
        type: String,
        default: '',
        required: false,
    },
});

let percentPie = ref({
    name: 'copy',
    type: 'pie',
    label: {
        position: 'inner',
        formatter: '{d}%', // {d} 代表百分比
        color: '#fff',
        fontSize: 14,
    },
    data: [],
});

let option = ref({
    tooltip: {
        trigger: 'item',
        borderColor: '#fff',
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '65%'],
            labelLine: {
                show: true,
                length: 40,
                lineStyle: {
                    color: '#DCDDDF',
                    type: 'dashed',
                },
            },
            label: {
                color: '#151B26',
                fontSize: 14,
                lineHeight: 20,
            },
            data: [],
        },
    ],
});

const handleInit = () => {
    if (!_.isEmpty(props.config)) {
        //合并配置
        const newOptions = _.merge({}, option.value, _.cloneDeep(props.config));
        const firstSeries = newOptions.series[0];
        const total = getTotal(firstSeries.data);

        // 百分比 展示
        if (props.percent) {
            percentPie.value.radius = firstSeries.radius;
            percentPie.value.data = firstSeries.data;
            newOptions.series = [firstSeries, percentPie.value];
        }

        if (props.semicircle) {
            newOptions.series = newOptions.series.map((item, idx) => {
                const data = item.data;
                const lastData = {
                    ...data[0],
                    name: '',
                    value: total,
                    itemStyle: {
                        color: 'none',
                        decal: {
                            symbol: 'none',
                        },
                    },
                    label: {
                        show: false,
                    },
                };
                const newItem = _.merge({}, item, {
                    startAngle: 180,
                    center: ['50%', '70%'],
                    ...(idx === 1
                        ? {
                              label: {
                                  formatter: params => {
                                      const semicirclePecent = (params.data.value / total) * 100;
                                      return ` ${semicirclePecent.toFixed(2)}%`;
                                  },
                              },
                          }
                        : {}),
                    data: [...data, lastData],
                });
                return newItem;
            });
        }
        option.value = newOptions;
    }
};

watchEffect(handleInit, [percentPie, props]);
</script>

<style lang="css" scoped></style>
